iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Mobile Development

大一之 Android Kotlin 自習心路歷程系列 第 11

[Day 11]Android in Kotlin: View Pager 2 —— FragmentStateAdapter 使用分享

  • 分享至 

  • xImage
  •  

ViewPager2 是之前更新釋出的,使用的感覺其實跟 recycler view 非常類似,所以只要熟悉 recycler view,相信 view pager 會很好上手。

這裡就跟 recycler view 一樣,快速做一個簡單的範例做介紹和分享。
page 1

可以通過左右滑動改變頁數,總共有五頁。

一樣,首先先在 build.grale(Module: app) 的 dependencies 中加入

// view pager 2
implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation 'com.google.android.material:material:1.3.0-alpha02'

我現在用的是這個版本,若有更新可換

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewPagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pagerMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

把 view pager 2 直接放入 layout 裡面,取個 id 和調整大小即可

Adapter

跟 recycler view 一樣,要顯示裡面的資料,就要有一個 adapter。
可用於 view pager 2 的 Adapter 分為兩個

  • 使用 RecyclerView.Adapter
  • 使用 FragmentStateAdapter

view pager 2 不同於 view pager 的是,view pager 2 可以直接使用 recycler view 的 adapter。除此之外,還有一個專用於切換顯示 fragment 的 adapter。在使用上,我比較常採用第二個。

在這邊就以 FragmentStateAdapter 做示範

建立一個 class,並繼承於 FragmentStateAdapter() 跟實作他的方法

class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
    override fun getItemCount(): Int {
        TODO("Not yet implemented")
    }

    override fun createFragment(position: Int): Fragment {
        TODO("Not yet implemented")
    }
}

目前為止還是可以感覺到跟 RecyclerView 的 Adapter 很相似。

  • getItemCount() 回傳總頁數
  • createFragment 是每一頁要執行的事,那這裡因為是要裝入 fragment 所以就在裡面回傳一個 fragment 即可,fragment 會在底下完成。

根據上述的功能,填入需求後,完成以下的方法。

class ViewPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 5
    //共 5 頁
    
    override fun createFragment(position: Int): Fragment {
        return ViewPagerFragment(position)
    }
}

Fragment

這是前面的 ViewPagerFragment()

在 fragment 的 alyout 裡面就放一個 text view 顯示在第幾頁而已

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textNumber"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="100sp"
        android:text="0"
        android:gravity="center"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在這裡我用建構元把 position 丟入 fragment,讓他自己也能知道自己是第幾頁,再把頁數顯示在這個 text view 上。

不過,要記得:fragment 一定要有一個沒有參數的建構元,所以我的建構元是另外寫在底下。

class ViewPagerFragment(): Fragment() {

    private var position: Int = 0
    
    constructor(position: Int) : this() {
        this.position = position
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val root = inflater.inflate(R.layout.fragment_pager, container, false)

        val textNumber: TextView = root.findViewById(R.id.textNumber)
        textNumber.text = (position + 1).toString()

        return root
    }
}

view pager 的 position 是從零開始的,所以在顯示上,我把 position 加上 1。

使用

有了 adapter 以後,就可以來 activity 做使用了。這樣就完成囉

class ViewPagerActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pager)

        val viewPager = findViewById<ViewPager2>(R.id.pagerMain)
        val viewPagerAdapter = ViewPagerAdapter(this)
        viewPager.adapter = viewPagerAdapter

    }
}

上一篇
[Day 10] Android in Kotlin: Fragment 換頁使用分享
下一篇
[Day 12] Android in Kotlin: Kotlin: 使用 Intent 在畫面之間傳遞訊息
系列文
大一之 Android Kotlin 自習心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言